import React, { useEffect, useState, useCallback } from 'react'
import { View, Image, Button } from '@tarojs/components'
import './mine.scss'
import Taro from '@tarojs/taro'
import { LoginWx } from '../../utils/util'
import { verifyTokenRequest } from '../../utils/api'
import Navbar from '../../components/navbar/navbar'

const Index = () => {
  const [isLogin, setIsLogin] = useState(false)
  const [isRepeatGologinTime, setIsRepeatGologinTime] = useState(0)
  const [userinfo, setUserinfo] = useState({})

  useEffect(() => {
    console.log('render')
    let obj = Taro.getStorageSync('userinfoAuth')
    setUserinfo(obj)
    // goLogin()

  }, [isLogin])

  const goLogin = useCallback(async (e) => {

    setIsRepeatGologinTime(e => e + 1)
    if (isRepeatGologinTime > 2) {
      return Taro.showToast({
        title: '重复登录！',
        duration: 4000,
        icon: 'none'
      })
    }

    console.log(e, 'e')
    if (e.detail.errMsg == 'getUserInfo:ok') {
      let token = Taro.getStorageSync('_token')
      if (token) {
        const res = await verifyTokenRequest({ token })
        console.log(res.data, 'res.data')
        if (res.data.code === 200) {
          console.log('登录成功')
          Taro.setStorageSync('userinfoAuth', e.detail.userInfo)
          setUserinfo(e.detail.userInfo)
          setIsLogin(true)

        } else {
          Taro.clearStorageSync('_token')
          goLogin()
        }
      } else {
        const resp = await LoginWx()
        if (resp.code == 200) {
          // 登录成功
          Taro.setStorageSync('_token', resp.data.token)
          Taro.setStorageSync('userinfoAuth', e.detail.userInfo)
          setUserinfo(e.detail.userInfo)
          setIsLogin(true)
          Taro.showToast({
            title: '登录成功！',
            duration: 4000
          })
        } else {
          Taro.showToast({
            title: 'Net Error',
            duration: 4000,
            icon: 'none'
          })
        }
      }
      
    }

  }, [isLogin, isRepeatGologinTime])

  return <View className="container-wapper">
    <Navbar titleText="我的" isSwitchPage={true}/>
    {
      isLogin ?
        <>
          <View className="user-info">
            <View className="info-avatar">
              <Image src={userinfo.avatarUrl}></Image>
            </View>
            <View className="info-name">{userinfo.nickName}</View>
            <View className="info-edit" onClick={() => { Taro.navigateTo({ url: '/pages/updateMessage/updateMessage' }) }}>编辑</View>
          </View>
          <View className="user-title">我的收藏</View>
          <View className="my-star">
            <View className="star-item">一键切图</View>
            <View className="star-item">更换背景</View>
            <View className="star-item">一键识别</View>
            <View className="star-item">看车识牌</View>
            <View className="star-item">人像美化</View>
          </View>
        </>
        : <View className="user-info">
          <View className="info-avatar">
            <Image src="https://glack.net/img/blog/art_imgs/3.jpg"></Image>
          </View>
          <Button className="info-name" open-type="getUserInfo" onGetUserInfo={goLogin}>请登录</Button>
        </View>
    }

  </View>
}

export default Index